<template>
  <div class="info">
    <el-card shadow="always">
      <div class="header">
        <el-button type="danger"
                   icon="el-icon-edit"
                   circle
                   @click="changeShow"></el-button>
      </div>
      <div class="avatar line">
        <img :src="userInfo.info.avatar"
             alt="">
      </div>
      <div class="line nick-name"> {{userInfo.info.nick_name}}</div>
      <div class="line "> {{userInfo.info.remark}}</div>
      <div class="content">
        <div class="line ">
          <i class="el-icon-service" /> {{userInfo.info.job}}</div>
        <div class="line ">
          <i class="el-icon-location" /> {{userInfo.info.address}}</div>
      </div>
      <hr class="hr">
      <div class="skill line">
        <el-tag type="info"
                class="tag"
                :key="tag.id"
                v-for="tag in userInfo.skill"
                closable
                :disable-transitions="false"
                @close="handleClose(tag)">
          {{tag.title}}
        </el-tag>

        <el-input class="input-new-tag tag"
                  v-if="inputVisible"
                  v-model="inputValue"
                  ref="saveTagInput"
                  size="small"
                  @keyup.enter.native="handleInputConfirm"
                  @blur="handleInputConfirm">
        </el-input>
        <el-button v-else
                   class="button-new-tag tag"
                   size="small"
                   @click="showInput">+ New Tag</el-button>
      </div>
      <hr class="hr">
      <el-dialog width="500px"
                 title="个人信息"
                 :visible.sync="dialogFormVisible">
        <el-form :model="userInfoCopy.info">
          <el-form-item label="昵称:"
                        label-width="50px">
            <el-input v-model="userInfoCopy.info.nick_name"
                      autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="签名:"
                        label-width="50px">
            <el-input v-model="userInfoCopy.info.remark"
                      autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="工作:"
                        label-width="50px">
            <el-input v-model="userInfoCopy.info.job"
                      autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="地址:"
                        label-width="50px">
            <el-input v-model="userInfoCopy.info.address"
                      autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer"
             class="dialog-footer">
          <el-button type="danger"
                     @click="dialogFormVisible = false">cancel</el-button>
          <el-button type="primary"
                     @click="submit">submit</el-button>
        </div>
      </el-dialog>

    </el-card>
  </div>
</template>
<script>
import { deepCopy } from "@/utils";
export default {
  props: {
    userInfo: Object
  },
  data() {
    return {
      inputVisible: false,
      inputValue: "",
      dialogFormVisible: false,
      userInfoCopy: {
        skill: [],
        info: {
          avatar: "",
          nick_name: "",
          remark: "",
          job: "",
          address: ""
        }
      }
    };
  },
  methods: {
    handleClose(tag) {
      this.$emit("delTag", tag.id);
    },
    showInput() {
      this.inputVisible = !this.inputVisible;
    },
    handleInputConfirm() {
      if (!this.inputValue) return;
      this.showInput();
      this.$emit("addTag", this.inputValue);
      this.inputValue = "";
    },
    changeShow() {
      this.userInfoCopy = deepCopy(this.userInfo);
      this.dialogFormVisible = !this.dialogFormVisible;
    },
    submit() {
      this.dialogFormVisible = !this.dialogFormVisible;
      this.$emit("submit", this.userInfoCopy.info);
    }
  },
  watch: {
    userInfo(val) {
      this.userInfoCopy = deepCopy(val);
    }
  }
};
</script>
<style lang="scss" scoped>
.info {
  text-align: center;
  .line {
    margin-top: 15px;
    margin-bottom: 15px;
  }
  .hr {
    border: 0.5px dashed #8d8c8c;
    margin-top: 15px;
    margin-bottom: 15px;
  }
  .header {
    text-align: right;
  }
  .avatar {
    margin: auto;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .nick-name {
    font-weight: bold;
  }
  .content {
    text-align: left;
  }
  .skill {
    text-align: left;
    .tag {
      margin: 5px;
    }
    .input-new-tag {
      width: 90px;
    }
  }
}
</style>
